import React from 'react';
import { inject,observer } from 'mobx-react';
import './index.less';
import { getAntd,getEcCom,getComsMobx,getLabel } from '../../../util/convert';

@inject('ehOperatorStore')
@observer
export default class Main extends React.Component{
    componentDidMount(){
        const { ehOperatorStore } = this.props;
        ehOperatorStore.doInit();
    }
    render(){
        const { WeaFormItem,WeaSearchGroup,WeaRightMenu,WeaDialogFooter } = getEcCom();
        const { WeaSwitch } = getComsMobx();
        const { ehOperatorStore } = this.props;
        const { fields,ehform } = ehOperatorStore;
        const formParams = ehform && ehform.getFormParams();
        let items = [];
        ehform && ehform.isFormInit && fields.map(field =>{
            const domKey = typeof field.domkey === "object" ? field.domkey[0] : field.domkey;
            items.push({
                com:(<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@s8un66@${domKey}`}
                        label={`${field.label}`}
                        labelCol={{span: `${field.labelcol}`}}
                        wrapperCol={{span: `${field.fieldcol}`}}
                        error={ehform.getError(field)}
                        tipPosition="bottom"
                    >
                        <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@9db84w@${domKey}`} fieldConfig={field} form={ehform} formParams={formParams} />
                    </WeaFormItem>),
                col:1
            })
        });
        return (
            <div className="wf-eh-choose-operator">
                <div className="wf-eh-choose-operator-content">
                    <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@l3c9mi`} {...this.getMoreBtns()}>
                        <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@jynzqx`} needTigger={false} showGroup={true} items={items} />
                    </WeaRightMenu>
                </div>
                <WeaDialogFooter ecId={`${this && this.props && this.props.ecId || ''}_WeaDialogFooter@8benav`} buttons={this.getButtons()} moreBtn={this.getMoreBtns()} />
            </div>
        )
    }
    getButtons(){
        const { Button } = getAntd();
        let buttons = [];
        buttons.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@gemfk8@confirm`} type='primary' onClick={this.doConfirm}>{getLabel(83446,'确定')}</Button>);
        return buttons;
    }
    getMoreBtns(){
        let btns = [];
        btns.push({
            key: '0',
            icon:  <i className='icon-coms-Preservation'/>,
            content: getLabel(83446,'确定'),
            onClick: key => this.doConfirm(),
        });
        return {datas:btns};
    }
    doConfirm = () => {
        const { ehOperatorStore } = this.props;
        const { ehform } = ehOperatorStore;
        const { relationship,operators } = ehform.getFormParams();
        ehform.validateForm().then(f =>{
            if(f.isValid){
                let ehparams = {eh_setoperator:"y", isFirstSubmit:1};
                ehparams = {...ehparams, ...{eh_relationship:relationship, eh_operators:operators}};
                ehOperatorStore.callBackEvent(ehparams);
            }else{
                f.showErrors();
            }
        });
    }
}